<template>
  <el-dialog
    title="文件预览"
    :visible.sync="dialogVisible"
    :fullscreen="true"
    width="100%">
     <div class="container">
      <img v-if="!isPfd" :src="fileUrl">
      <pdf v-else :src="fileUrl"></pdf>
    </div>
    <div class="btn-box">
          <div class="remove-btn" @click="cancellation">取消</div>
          <div class="sub-btn" @click="downloadFile">下载附件</div>
        </div>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  data () {
    return {
      dialogVisible: false,
      isPfd: false,
      fileId: '',
      fileUrl: ''
    }
  },
  components: { pdf },
  methods: {
    showDialog (file) {
      let arr = file.name.split('.')
      if (arr[arr.length - 1] === 'pdf') {
        this.isPfd = true
      } else {
        this.isPfd = false
      }
      this.fileId = file.guid
      this.fileUrl = `/apis/api/FilesDownload/GetFile?filename=${file.name}`
      console.log('点击的文件---->', this.fileUrl, this.isPfd)
      this.dialogVisible = true
      
    },
    // 下载附件
    downloadFile () {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = `http://192.168.8.181:925/api/FilesDownload?guid=${this.fileId}`
      a.click()
      document.body.remove(a)
      // this.$router.push('/FilesList', () => {}, () => {})
      setTimeout(() => {
        this.$router.go(0)
      }, 100)
    },
    // 取消
    cancellation () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: auto;

  /* border: 1px solid red; */
  >img {
    width: 32%;
  }
}
.btn-box {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 10px 0;
    padding-right: 10px;

    /* border: 1px solid #c40f0f; */
    > div {
      width: 60px;
      height: 32px;
      margin-left: 10px;
      color: #fff;
      font-size: 12px;
      line-height: 32px;
      text-align: center;
      background: #85ce61;
      border-radius: 5px;
    }
    > div:hover {
      background: rgba($color: #85ce61, $alpha: 80%);
      cursor: pointer;
    }
    .sub-btn {
      color: #fff;
      background: #67c23a;
    }
    .sub-btn:hover {
      color: #fff;
      background: #85ce61;
      border-color: #85ce61;
      cursor: pointer;
    }
    .remove-btn {
      color: #000;
      background: rgba($color: #000, $alpha: 0%);
      border: 1px solid #dcdfe6;
    }
    .remove-btn:hover {
      color: #409eff;
      background-color: #ecf5ff;
      border-color: #c6e2ff;
      cursor: pointer;
    }
  }
</style>